<template>
    <div>
        <div class="addContainer" v-if="addShow" @click="closeAdd"></div>
        <transition name="fade">
            <div class="addWrapper" v-if="addShow">
                <div class="buttonArea" flex="main:justify cross:top">
                    <div class="albumBtn" flex-box="0" @click="addFuc('album')">
                        <div class="album"></div>
                        <p flex="main:center cross:center" class="font13 opacity5">相册</p>
                    </div>
                    <div class="videoBtn" flex-box="0" @click="addFuc('video')">
                        <div class="video"></div>
                        <p flex="main:center cross:center" class="font13 opacity5">拍摄</p>
                    </div>
                    <div class="audioBtn" flex-box="0" @click="addFuc('audio')" v-if="del!=='audio'">
                        <div class="audio" v-if="num==3"></div>
                        <p flex="main:center cross:center" class="font13 opacity5">语音</p>
                    </div>
                </div>
                <div class="closeArea" flex="main:center cross:center" @click="closeAdd">
                    <div class="closeBtn"></div>
                </div>
            </div>
        </transition>
    </div>
</template>
<script type="text/babel">
    export default{
        data(){
            return {
                addShow:false
            }
        },
        props:{
            num:{
                default:3
            },
            del:false
        },
        mounted(){

        },
        computed: {},
        methods: {
            addFuc(type){
                this.$emit('addFuc',type)
            },
            closeAdd(){
                this.addShow=false;
            }
        }
    }
</script>
<style scoped lang="scss">
    .fade-enter-active {
        -webkit-animation:fadeIn 0.3s ease-out;
        animation: fadeIn 0.3s ease-out;
        -webkit-animation-fill-mode:forwards;
        animation-fill-mode:forwards;
    }
    .fade-leave-active {
        -webkit-animation:fadeOut 0.3s ease-out;
        animation: fadeOut 0.3s ease-out;
        -webkit-animation-fill-mode:forwards;
        animation-fill-mode:forwards;
    }
    @keyframes fadeIn {
        0% {
            -webkit-transform: translate3d(0,100%,0);
            transform: translate3d(0,100%,0);
        }
        100% {
            -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
        }
    }
    @keyframes fadeOut {
        0% {
            -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
        }
        100% {
            -webkit-transform: translate3d(0,100%,0);
            transform: translate3d(0,100%,0);
        }
    }
    @keyframes upAndDown {
        0% {
            -webkit-transform: translate3d(0,100%,0);
            transform: translate3d(0,100%,0);
        }
        25% {
            -webkit-transform: translate3d(0,-0.3rem,0);
            transform: translate3d(0,-0.3rem,0);
        }
        50%{
            -webkit-transform: translate3d(0,0.2rem,0);
            transform: translate3d(0,0.2rem,0);
        }
        75%{
            -webkit-transform: translate3d(0,-0.1rem,0);
            transform: translate3d(0,-0.1rem,0);
        }
        100%{
            -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
        }
    }
    .addContainer{
        background: transparent;
        top:0;
        left:0;
        right:0;
        bottom:0;
        position: fixed;
        z-index: 110;
    }
    .addWrapper{
        background:rgba(0,0,0,1);
        width:100%;
        height:2.1rem;
        position: fixed;
        bottom:0;
        left:0;
        z-index: 111;
        box-sizing: border-box;
        padding-top: 0.51rem;
        p{
            position: absolute;
            width: 100%;
            bottom:0;
            left: 0;
        }
        .buttonArea{
            padding-left: 0.51rem;
            padding-right: 0.48rem;
            .albumBtn{
                height: 0.7rem;
                width:0.37rem;
                position: relative;
                -webkit-animation:upAndDown 0.8s ease-in;
                animation: upAndDown 0.8s ease-in;
                -webkit-animation-fill-mode:forwards;
                animation-fill-mode:forwards;
                .album{
                    height: 0.37rem;
                    width:0.37rem;
                    background: url("images/addP.png") no-repeat center center/contain;
                }
            }
            .audioBtn{
                height: 0.7rem;
                width:0.33rem;
                position: relative;
                -webkit-animation:upAndDown 1.3s ease-in;
                animation: upAndDown 1.3s ease-in;
                -webkit-animation-fill-mode:forwards;
                animation-fill-mode:forwards;
                .audio{
                    height: 0.43rem;
                    width:0.33rem;
                    background: url("images/addA.png") no-repeat center center/contain;
                }
            }
            .videoBtn{
                height: 0.7rem;
                width:0.46rem;
                position: relative;
                -webkit-animation:upAndDown 1.1s ease-in;
                animation: upAndDown 1.1s ease-in;
                -webkit-animation-fill-mode:forwards;
                animation-fill-mode:forwards;
                .video{
                    height: 0.34rem;
                    width:0.46rem;
                    background: url("images/addV.png") no-repeat center center/contain;
                }
            }
        }
        .closeArea{
            width: 100%;
            left:0;
            bottom:0.2rem;
            position: absolute;
            .closeBtn{
                height: 0.15rem;
                width: 0.15rem;
                background: url("./images/closeBtn.png") no-repeat center center/contain;
            }
        }
    }
</style>